<template>
  <div>
    <ComponentCard title="累计用户数" :value="numberFormat(usersTotal)">
     <div ref="barChartRef" style="width: 100%;height: 100%"></div>
      <template #footer>
        <div class="footer">
<!--          <div>同日比 &nbsp;17.20%<span class="increment"></span></div>-->
<!--          <div>同日比 &nbsp;47.20%<span class="decrement"></span></div>-->
          <span>日同比</span>&nbsp;
          <span class="emphasis">{{userGrowthLastDay}}</span>&nbsp;
          <span class="increment"></span>
          <span>月同比</span>&nbsp;
          <span class="emphasis">{{userGrowthLastMonth}}</span>&nbsp;
          <span class="decrement"></span>
        </div>

      </template>
    </ComponentCard>
  </div>
</template>

<script lang="ts">
export default {
  name: "transaction"
};
</script>
<script lang="ts" setup>
import ComponentCard from "./ComponentCard.vue";
import { computed, onMounted, ref, watch } from "vue";
import * as echarts from 'echarts'
import type { EChartsType } from 'echarts'
import {useReportStore} from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'

const {numberFormat} = useFormat()
const  reportDataStore = useReportStore()
//定义一个ref，关联到页面上的ref标签上面
const barChartRef = ref()
let barChart:EChartsType
const getOption = ()=>{
  return {
    xAxis:{
      show:false,
      min:0,
      max:1177965
    },
    yAxis:{
      show:false,
      data:['用户增长量']
    },
    series:{
      name:'用户增长量',
      type:'bar',
      // data:[78],
      data:[usersTotal.value-usersLastMonth.value],
      barWidth : 10, //设置柱条的宽度
      showBackground:true,  //设置柱条背景色
      itemStyle:{
        color:"green"
      }
    },
    // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
    label:{
      show:true,
      formatter:'|',
      color: 'orangered',
      position: 'right'
    },
    grid:{
      left:0,
      right:0
    },
   tooltip:{
     trigger:'axis',
     confine:true
    }
  }
}
onMounted(()=>{
 barChart = echarts.init(barChartRef.value) //初始化echarts实例
 // barChart.setOption(getOption())  //绘制图表
  // 当页面尺寸变化的时候，也需要变化
  window.addEventListener('resize', () => {
    barChart && barChart.resize()
  })
})
// 2.计算属性
const usersTotal = computed(()=> reportDataStore.reportData.usersTotal)
const usersLastMonth = computed(()=>reportDataStore.reportData.usersLastMonth)
const userGrowthLastDay = computed(()=>reportDataStore.reportData.userGrowthLastDay)
const userGrowthLastMonth = computed(()=>reportDataStore.reportData.userGrowthLastMonth)
// 3.监听
watch(usersTotal,()=>{
  barChart.setOption(getOption())
})
</script>
<style lang="scss" scoped>
//.footer{
//  display: flex;
//  align-items: center;
//  >div{
//    margin-right: 10px;
//    display: flex;
//    align-items: center;
//  }
//}
.footer{
  display: flex;
  align-items: center;
}
</style>